import React from "react";

class TestState extends React.Component {
    state = {
        count: 1
    }
    handleAdd = () => {
        this.setState({
            count: this.state.count + 1
        });
        console.log(this.state.count);//这里返回的是1不是2，因为this.setState是异步执行的；
    }
    // 推荐语法：setState方法的第一个参数 回调函数形式， 可以使用上一次返回的state里面的数据，
    handleAdd2 = ()=>{
        // 回调函数有2个参数 state表示最新的state，props表示最新的props
        this.setState((state,props)=>{
            return {
                count:state.count+1
            }
        })
        this.setState((state,props)=>{
            console.log(state)
            return {
                count:state.count+1,//这时候 页面显示的数字是3 因为做了叠加操作，
            }
        })

        this.setState(
            (state,props)=>{
            },
            ()=>{
                document.title="更新state后立即执行" + this.state.count
                console.log("点击完毕后立即执行")
            }
        )
        // setState方法的第二个参数 可以
    }
    render() {
        console.log("一个方法中做多次setState，但是render只执行一次渲染。")
        return (
            <div>
                <h3>setState的方法使用说明</h3>
                <p>数量：{this.state.count}</p>
                <button onClick={this.handleAdd2}>点击</button>
            </div>
        )
    }
}

export default TestState